<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title></title>
</head>
<body>

<script type="text/javascript" src="lib/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="lib/knockout-2.2.0.debug.js"></script>
<script type="text/javascript" src="person.js"></script>

<div class="container">

    <div class="nav">
        <ul class="navigation">
            <li><a href="#" data-bind="click: loadPersonsHandler">Load persons</a></li>
            <li><a href="#" data-bind="click: newPersonHandler">New person</a></li>
            <li><a href="#">Addresses</a></li>
            <li><a href="#">Phone numbers</a></li>
        </ul>
    </div>

    <div class="list">

        <div class="search">
            <input id="search-field" class="input-field" placeholder="Search">
            <input class="button" value="Find" type="button">
        </div>

        <div class="found-wrapper">
            <h2>Found persons</h2>
            <ul class="found" data-bind="foreach: personList, visible: personList().length > 0">
                <li><a href="#" data-bind="click: $parent.editHandler"><span data-bind="text: fullName"></span></a></li>
            </ul>
        </div>


    </div>

    <div class="content">

        <div id="create-person" class="person-form" data-bind="visible: modeChooser() == 1">

            <div class="picture"></div>

            <div class="create-fields">
                <h2 class="create-header">Create new person</h2>
                <p><input class="input-field" data-bind="value: firstName" type="text" placeholder="First name"></p>
                <p><input class="input-field" data-bind="value: lastName" type="text" placeholder="Last name"></p>
                <p>
                    <input class="input-field" data-bind="value: description, valueUpdate: 'afterkeydown'" type="text" placeholder="Email">
                    <span data-bind="text: mailIsValid"></span>
                </p>
                <input class="button" id="create-person-button" data-bind="click: createPersonHandler" type="button" value="Create">
                <input class="button" id="cancel-person-creation" data-bind="click: cancelCreateHandler" type="button" value="Cancel">
            </div>

        </div>

        <div id="edit-person" class="person-form" data-bind="visible: modeChooser() == 2">

            <div class="picture"></div>

            <div class="person-info">
                <h2 class="create-header">Edit person</h2>
                <p><input class="edit-field" data-bind="value: firstName, valueUpdate: 'afterkeydown'" type="text" placeholder="First name"></p>
                <p><input class="edit-field" data-bind="value: lastName, valueUpdate: 'afterkeydown'" type="text" placeholder="Last name"></p>
                <p><input class="edit-field" data-bind="value: description, valueUpdate: 'afterkeydown'" type="text" placeholder="Email"></p>
                <input class="button" id="save-person-button" data-bind="click: saveHandler, visible: modelIsChanged()" type="button" value="Save">
                <input class="button" id="cancel-person-saving" data-bind="click: cancelEditing, visible: modelIsChanged()" type="button" value="Cancel">
            </div>

        </div>

        <div id="addresses" class="person-form" data-bind="visible: modeChooser() == 2">
            <h2  class="edit-header">Addresses</h2>
            <input id="new-address" class="button" data-bind="click: switchAddAddress" type="button" value="New">

            <table class="address-table">
                <thead>
                <tr>
                    <th style="width: 30%; text-align: left">City</th>
                    <th style="width: 30%; text-align: left">Street</th>
                    <th style="width: 15%; text-align: left">Building</th>
                    <th style="width: 15%; text-align: left">Apartment</th>
                    <th style="width: 10%"></th>
                </tr>
                </thead>

                <tbody data-bind="foreach: addresses, visible: addresses().length > 0">
                <tr>
                    <td style="text-align: left"><span data-bind="text: city"></span></td>
                    <td style="text-align: left"><span data-bind="text: street"></span></td>
                    <td style="text-align: left"><span data-bind="text: building"></span></td>
                    <td style="text-align: left"><span data-bind="text: apartment"></span></td>
                    <td><a class="remove-link" href="#" data-bind="click: $parent.removeAddress">Remove</a></td>
                </tr>
                </tbody>
            </table>

            <div class="add-address" data-bind="visible: a">
                <p>
                    <input class="input-field" data-bind="value: city" placeholder="City" style="width: 165px">
                    <input class="input-field" data-bind="value: street" placeholder="Street" style="width: 165px">
                    <input class="input-field" data-bind="value: building" placeholder="Building" style="width: 60px">
                    <input class="input-field" data-bind="value: apartment" placeholder="Apartment" style="width: 60px">
                    <input data-bind="click: addAddressHandler" class="button" type="button" value="OK" >
                    <input data-bind="click: switchAddAddress" class="button" type="button" value="Cancel">
                </p>
            </div>

        </div>

        <div id="phones" class="person-form" data-bind="visible: modeChooser() == 2">
            <h2  class="edit-header">Phones</h2>
            <input id="new-phone" class="button" data-bind="click: switchAddPhone" type="button" value="New">

            <table class="address-table">
                <thead>
                <tr>
                    <th style="width: 30%; text-align: left">Code</th>
                    <th style="width: 30%; text-align: left">Number</th>
                    <th style="width: 30%; text-align: left">Phone type</th>
                    <th style="width: 10%"></th>
                </tr>
                </thead>

                <tbody data-bind="foreach: phoneNumbers, visible: phoneNumbers().length > 0">
                <tr>
                    <td style="text-align: left"><span data-bind="text: code"></span></td>
                    <td style="text-align: left"><span data-bind="text: number"></span></td>
                    <td style="text-align: left"><span data-bind="text: phoneType"></span></td>
                    <td><a class="remove-link" href="#" data-bind="click: $parent.removePhoneNumber">Remove</a></td>
                </tr>
                </tbody>
            </table>

            <div class="add-phone" data-bind="visible: b">
                <p>
                    <input class="input-field" data-bind="value: code" placeholder="Code" style="width: 50px">
                    <input class="input-field" data-bind="value: number" placeholder="Number" style="width: 170px">
                    <input class="input-field" data-bind="value: phoneType" placeholder="Phone type" style="width: 170px">
                    <input data-bind="click: addPhoneHandler" value="OK" type="button" class="button">
                    <input data-bind="click: switchAddPhone" value="Cancel" type="button" class="button">
                </p>
            </div>
        </div>

    </div>

</div>

</body>
</html>